<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: springgreen;
            position: absolute;
            top: 100px;
            left: 100px;

            opacity: 1;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const box = document.querySelector("div")
        box.onclick = function () {
            move(this, "left", 300)
            move(this, "top", 400)
            // move(this, "width", 600)
            // move(this, "height", 600)

            /* 对盒子透明度的一个移动 */
            // move(this,'opacity',0)
        }

        function move(ele, type, target) {
            let timer = setInterval(() => {
                //获取当前的坐标位置
                let current = parseInt(window.getComputedStyle(ele)[type])
                /* 
                    移动最后一次的距离是0.9px
                    而浏览器能够识别的最小单位是1px
                    所以我们浏览器忽略他了
                */
                let step = (target - current) / 10
                /* 
                    如果是一个大于0的数,表示正向移动,那么其中的小数就向上取整
                    如果是一个小于0的数,表示反向移动,那么其中的小数就向下取整
                */
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                if (current == target) {
                    /* 清除定时器 */
                    clearInterval(timer)
                    timer = null;
                } else {
                    ele.style[type] = current + step + "px";
                }
            }, 16);
        }
    </script>
</body>

</html>